<template>
    <MyCard>
        <div class="title">
            <div></div>
            服务项目管理
        </div>
        <div class="menu-container">
            <el-space>
                <span style=" font-size: 13px;color: #999999;">项目类型</span>
                <el-select v-model="searchItem.type" placeholder="请选择" style="width: 200px;">
                    <el-option label="全部" value="全部" />
                    <el-option label="免费项目" value="免费项目" />
                    <el-option label="付费项目" value="付费项目" />
                </el-select>
                <el-input style="width: 376px;height: 40px;" placeholder="请输入关键字" :suffix-icon="Search"
                    v-model="inputItem" @blur="searchEvent()" />
            </el-space>
            <router-link to="/data/serviceItem/add"><el-button type="primary"> 新增服务项目</el-button></router-link>
        </div>
        <MyTable :columns="columns" :stripe="true" :data="tableData" :total="total" v-model:pageData="pageData">
            <template #action="scope">
                <el-button link style="border: none;" type="primary" @click="toForm(scope.row._id)">
                    编辑
                </el-button>
                <el-button link style="border: none;" type="danger" @click="deleteServiceItems(scope.row._id)">
                    删除
                </el-button>
            </template>
            <template #count="scope">
                <span style="color: #2984F8;">{{ scope.row.count }}次</span>
            </template>
            <template #price="scope">
                <span style="color: #FA746B;">{{ scope.row.price }}</span>
            </template>
        </MyTable>
    </MyCard>
</template>

<script setup>
import { Search } from '@element-plus/icons-vue'
import { onMounted, ref, watch } from 'vue';
import { deleteServiceItemsApi, findServiceItemsApi } from '../../../api/serviceItems';
import { useRouter } from 'vue-router';
import MyTable from '../../../components/MyTable.vue'
import MyCard from '../../../components/MyCard.vue';

const router = useRouter();
const searchItem = ref({
    type: '',
});
const inputItem = ref('')
const pageData = ref({
    currentPage: 1,
    pageSize: 10,
});
const total = ref(0);
const tableData = ref([]);
const columns = ref([
    { label: '项目编号', prop: '_id', align: 'center' },
    { label: '项目名称', prop: 'name', align: 'center' },
    { label: '次数', prop: 'count', align: 'center' },
    { label: '项目类型', prop: 'type', align: 'center' },
    { label: '项目原价(元)', prop: 'price', align: 'center' },
    { label: '项目介绍', prop: 'intro', width: 376, align: 'center' },
    { label: '项目操作', prop: 'action', align: 'center' },
])

watch([pageData.value, searchItem], () => {
    findServiceItems();
}, { deep: true })

onMounted(() => {
    findServiceItems();

})
const toForm = (_id) => {
    router.push({ path: '/data/serviceItem/add', query: { _id } });

}


//搜索框
function searchEvent() {
    findServiceItems();
}
//获取服务项目管理数据
function findServiceItems() {
    if (searchItem.value.type != '全部') {
        findServiceItemsApi({ ...pageData.value, type: searchItem.value.type, name: inputItem.value }).then(res => {
            if (res.code == 200) {
                tableData.value = res.data.rows
                total.value = res.data.total
            }
        })
    } else {
        findServiceItemsApi({ ...pageData.value, name: inputItem.value }).then(res => {
            if (res.code == 200) {
                tableData.value = res.data.rows
                total.value = res.data.total
            }
        })
    }

}
//删除
function deleteServiceItems(item) {
    ElMessageBox.confirm(
        '删除后无法恢复，定要删除此条记录吗？',
        '确认删除',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            deleteServiceItemsApi({ _id: item }).then(res => {
                if (res.code == 200) {
                    ElMessage.success('删除成功!');
                    findServiceItems();
                } else {
                    ElMessage.error(res.message);
                }
            })
        })
        .catch(() => {
        })




}
</script>

<style lang="scss" scoped>
.title {
    display: flex;
    line-height: 1;
    font-size: 18px;
    color: rgba(51, 51, 51, 0.898039215686275);
    margin-bottom: 20px;

    div {
        margin-top: -1px;
        width: 6px;
        height: 23px;
        background-color: rgba(41, 132, 248, 1);
        margin-right: 10px;
        border-radius: 60px;
    }
}

.menu-container {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
}
</style>